<template>
	<view class="content">
		<view class="box" v-for="(item,index) in topList" :key="item.id">
			<image class="img" :src="item.scene_pic_url" mode="widthFix"></image>
			<view class="title">
				{{ item.title }}
			</view>
			<view class="txt">
				{{ item.subtitle }}
			</view>
			<view class="price">
				{{ item.price_info | topicFormat }}
			</view>
		</view>
		<!-- 用不了，会报错 -->
		<!-- <uni-pagination title="标题文字" :total="count" :current="currentPage" @change="changePage"></uni-pagination> -->

		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from "@/custom-tab-bar/index.vue"
	import {
		ApiGetTopic
	} from "@/utils/api.js"

	export default {
		components: {
			customTabBar
		},
		data() {
			return {
				topList: [],
				totalPages: 0,
				currentPage: 0,
				count: 0,
			}
		},
		async onLoad() {
			this.getData({
				page: 1,
				size: 10
			})
		},
		onShow() {
			this.$store.commit('changeTabbarIndex', 1);
		},
		methods: {
			changePage(e) {
				let pageNum = e.current;
				this.getData({
					page: pageNum,
					size: 10
				});
				uni.showLoading({
					title: '加载中',
				})
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			async getData(params) {
				let res = await ApiGetTopic(params)
				if (res.errno !== 0) return;

				let {
					data,
					totalPages,
					currentPage,
					count
				} = res.data;
				this.topList = data;
				this.totalPages = totalPages; // 总共页数
				this.currentPage = currentPage; // 当前页是第几页
				this.count = count; // 总共有多少行

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #efefef;
		padding-bottom: 130rpx;

		.box {
			text-align: center;
			background-color: #fff;
			margin-bottom: 40rpx;

			.img {
				width: 100%;
				height: 415rpx;
				display: block;
			}

			.title {
				height: 75rpx;
				line-height: 75rpx;
				font-size: 35rpx;
				margin-top: 10rpx;
			}

			.txt {
				height: 75rpx;
				line-height: 75rpx;
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 0 20rpx;
			}

			.price {
				height: 75rpx;
				line-height: 75rpx;
				font-size: 26rpx;
				color: #9b0000;
			}
		}

		// .pagination {
		// 	width: 100%;
		// 	height: 400rpx;
		// 	background-color: pink;
		// }
	}
</style>
